<template>
  <div v-show="visible">
    <div class="grid_cont">
      <div style="display: flex">
        <div style="width: 3px; height: 18px; background-color: rgba(204, 53, 47, 1)"></div>
        <div style="margin-left: 10px; font-size: 16px; line-height: 16px">{{
          formParams.title
        }}</div>
      </div>
      <div class="line_style">
      </div>
      <el-form :model="formParams" ref="formRef" :rules="rules" class="label_style" label-width="126px">
        <el-form-item required label="活动主题：" prop="theme" style="min-width: 570px;">
          <el-input v-model="formParams.theme" style="max-width: 588px;" placeholder="一个简洁明了且富有吸引力的主题，能够准确传达活动的核心内容。" />
        </el-form-item>
        <el-row style="max-width: 732px;min-width: 570px;">
          <el-col :span="12">
            <el-form-item required label="活动开始时间：" prop="beginTime">
              <el-date-picker v-model="formParams.beginTime" type="date" value-format="x" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item required label="活动结束时间：" prop="endTime">
              <el-date-picker v-model="formParams.endTime" type="date" value-format="x" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item required label="活动介绍：" prop="content" style="min-width: 570px;">
          <div style="max-width: 586px; text-align: left">
            <div class="introducestyle">
              <Editor v-model="formParams.content" style="max-width: 586px" :editor-config="editorConfig" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="封面图：" prop="area">
          <UploadImg v-model="formParams.imageUrl" :limit="1" />
        </el-form-item>
      </el-form>
    </div>
    <div class="grid_cont2">
      <el-button class="grid_btn" @click="gridCancel" style="
          background-color: rgba(255, 255, 255, 1);
          border: 1px solid rgba(187, 187, 187, 1);
          color: rgba(142, 142, 142, 1);
        ">取消</el-button>
      <el-button class="grid_btn" @click="gridSure"
        style="background-color: #ff9900; border: 1px solid #ff9900; color: #fff">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import * as getTouristApi from '@/api/smartTourism/index'
const editorConfig = ref({
  placeholder:
    '**活动地点**：详细说明活动在景区内的具体举办地点，如某个景点、广场或特定场馆。**活动内容**：对活动的具体形式和内容进行详细描述，例如文艺表演、主题展览、亲子活动、户外运动等。让游客对活动有清晰的了解，判断是否符合自己的兴趣。**活动亮点**：突出活动的特色和亮点，如知名嘉宾、特别的表演环节、独特的体验项目等，以吸引更多游客参与。**参与对象**：说明活动适合的人群，如儿童、成人、家庭等，以便游客根据自己的情况决定是否参加。**报名方式（如需要）**：如果活动需要提前报名，应明确告知报名的时间、方式（如线上报名链接、线下报名地点）以及所需的信息。**费用说明**：清楚说明活动是否收费，以及收费标准和包含的项目。如果有优惠政策或套餐，也应一并说明。**注意事项**：提醒游客参加活动需要注意的事项，如着装要求、安全提示、特殊天气应对等。**联系方式**：提供景区的咨询电话或相关负责人的联系方式，以便游客在有疑问时能够及时咨询。**配套服务**：如活动现场是否提供餐饮、休息区域等相关服务信息。**交通指南**：为游客提供到达景区及活动地点的交通建议，包括自驾路线、公共交通方式等。**周边景点推荐**：可以介绍活动地点周边的其他景点或游玩项目，方便游客在参加活动之余进行更多的探索。'
})

const formParams = reactive({
  theme: '',
  beginTime: '',
  endTime: '',
  content: '',
  imageUrl: '',
  title: ''
})
const formRef = ref() // 搜索的表单
const rules = reactive({
  theme: [{ required: true, message: '活动主题不能为空！', trigger: 'blur' }],
  beginTime: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择开始时间'))
        } else {
          if (formParams.endTime) {
            formRef.value.validateField('endTime')
          }
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  endTime: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择结束时间'))
        } else {
          if (!formParams.beginTime) {
            callback(new Error('请选择开始时间！'))
          } else if (new Date(formParams.beginTime).getTime() >= new Date(value).getTime()) {
            callback(new Error('结束时间必须大于开始时间！'))
          } else {
            callback()
          }
        }
      },
      trigger: 'change'
    }
  ],
  content: [
    {
      type: 'paragraph',
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('活动介绍不能为空'))
        } else {
          let str = value
            .replace(/<[^<p>]+>/g, '')
            .replace(/<[</p>$]+>/g, '')
            .replace(/&nbsp;/gi, '')
            .replace(/<[^<br/>]+>/g, '')
            .replace(/\s+/g, '')
          if (str.length === 0) {
            callback(new Error('请填写活动介绍'))
          } else {
            callback()
          }
        }
      },
      trigger: 'blur'
    }
  ]
})
const visible = ref(false)
const props = defineProps({
  addShow: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object
  }
})

const emit = defineEmits(['getaddShow', 'geteditData'])
watch(
  () => props.addShow,
  (val) => {
    visible.value = val
  },
  { immediate: true }
)
watch(
  () => props.editData,
  (val) => {
    if (val) {
      formParams.theme = val.topic
      formParams.beginTime = val.beginTime
      formParams.endTime = val.endTime
      formParams.content = val.content
      formParams.imageUrl = val.coverPhotoUrl
      formParams.title = val.dialogtitle
      if (props.addShow == true) {
        formRef.value.validate()
      }
    }
  },
  { immediate: true }
)
/** 取消按钮操作 */
const gridCancel = () => {
  visible.value = false
  emit('getaddShow', visible.value)
  emit('geteditData', props.editData.pageNo)
}
/** 确定按钮操作 */
const gridSure = async () => {
  await formRef.value.validate()
  const ActivityData = {
    topic: formParams.theme,
    beginTime: formParams.beginTime,
    endTime: formParams.endTime,
    content: formParams.content,
    coverPhotoUrl: formParams.imageUrl
  }
  if (formParams.theme && formParams.beginTime && formParams.endTime && formParams.content) {
    if (formParams.title === '新增图文') {
      ElMessageBox.confirm('是否确认新增图文?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          getTouristApi.createActivity(ActivityData).then((res) => {
            if (res) {
              ElMessage.success('新增成功！')
              emit('geteditData', props.editData.pageNo)
              visible.value = false
              emit('getaddShow', visible.value)
            }
          })
        })
        .catch(() => {
          ElMessage.info('已取消新增图文')
        })
    }
    if (formParams.title === '编辑图文') {
      ElMessageBox.confirm('是否确认编辑图文?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          ActivityData.id = props.editData.id
          getTouristApi.updateActivity(ActivityData).then((res) => {
            if (res) {
              ElMessage.success('修改成功！')
              emit('geteditData', props.editData.pageNo)
              visible.value = false
              emit('getaddShow', visible.value)
            }
          })
        })
        .catch(() => {
          ElMessage.info('已取消编辑图文')
        })
    }
  } else {
    ElMessage.warning('星号为必填项不能为空！')
  }
}
</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
}

.grid_btn:hover {
  opacity: 0.8;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #cc352f !important;
  background-color: #cc352f !important;
}

::v-deep .el-radio__inner:hover {
  border-color: #cc352f !important;
}

::v-deep .el-radio__input.is-checked+.el-radio__label {
  color: #cc352f !important;
}

::v-deep .el-cascader .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #cc352f !important;
}

.introducestyle {
  box-shadow: 0 0 0 1px var(--el-disabled-border-color);
  border-radius: 4px;
  background: transparent !important;
}

.introducestyle:hover {
  box-shadow: 0 0 0 1px #ccc !important;
}

.introducestyle::selection {
  box-shadow: 0 0 0 1px #cc352f !important;
}

::v-deep .w-e-text-placeholder {
  top: 10px;
  left: 0;
  text-align: justify;
  width: 100%;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  height: 490px;
  line-height: 24px;
}

::v-deep .w-e-bar {
  box-shadow: 0px 1px 0px 0px var(--el-disabled-border-color);
}

::v-deep .w-e-bar:hover {
  box-shadow: 0 1px 0 0 #ccc !important;
}

::v-deep .border-solid {
  border-color: #fff;
  border-radius: 4px;
}

::v-deep .upload .el-upload .el-upload-dragger {
  border: 1px solid var(--el-border-color-darker) !important;
}

::v-deep .upload .el-upload .el-upload-dragger:hover {
  border: 1.5px solid #ccc !important;
}

.label_style {
  padding-left: 14px;
  padding-right: 14px;
  text-align: right;
  overflow-x: scroll;
}

::v-deep .label_style::-webkit-scrollbar {
  height: 3px;
}

::v-deep .label_style:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

::v-deep .label_style::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: transparent;
}

::v-deep .label_style::-webkit-scrollbar-track {
  display: none;
}

.line_style {
  width: 100%;
  height: 1px;
  background-color: rgba(245, 245, 245, 1);
  margin-top: 16px;
  margin-bottom: 30px;
}
</style>